/**
 * title: Github Trending using umi ssr
 */
import { useEffect, useState } from 'react';
import { isEqual } from 'lodash';
import styles from './index.less';
import { Layout, Menu, Breadcrumb, Carousel, Row, Col, Icon, Button, Divider, Tabs} from 'antd';
import fetch from 'umi-request';
import {Helmet} from "react-helmet";
import { stringify } from 'qs';
import BigTitle from '@/components/BigTitle'
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
// import Slider from '@/components/Slider'
import SliderItem from '@/components/SliderItem'
import Slider from '@/components/Slider'
import ActivitySlider from '@/components/ActivitySlider'
import AboutUS from '@/components/AboutUS'
import KnowMore from '@/components/KnowMore'
import {BIAOTI, GYWM, JIANTOU2, JIANTOU4, YUAN, LOGO, TITLE} from '../constants'
import Question from '@/components/Question'
import Information from '@/components/Information'
import ContactUS from '@/components/ContactUS'
import Links from '@/components/Links'
import Footer from '@/components/Footer'



const apiDomainName = 'http://47.97.253.142:8022';
const imgDomainName = 'http://hua-jun-guan-wang.oss-cn-hangzhou.aliyuncs.com/';
let slider;

function Page(props) {
  console.log('props: ', props);
  const bannerData = props.bannerData || [];
  const introduceData = props.introduceData || [];
  const activityData = props.activityData || [];
  const problemData = props.problemData || [];
  const informationData = props.informationData || [];
  const collegeData = props.collegeData || [];
  const settingData = props.settingData || [];
  // console.log('bannerData: ', bannerData);
  // console.log('introduceData: ', introduceData);
  // console.log('problemData: ', problemData);
  // console.log('informationData: ', informationData);
  // console.log('collegeData: ', collegeData);
  // console.log('settingData: ', settingData);

  // const [data, setData] = useState(props.data || []);
  // // const colors = ['magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple'];
  // const { search } = props.location;
  // console.log('props: ', props);
  // useEffect(() => {
  //   if (!isEqual(data, props.data)) {
  //     (async () => {
  //       const res = await fetch(`https://github-trending-api.now.sh/repositories${search}`);
  //       setData(res);
  //     })();
  //   }
  // }, [search, data]);

  const onBannerClick = () => {
    //新跳转：商桥
    // window.open('http://plt.zoosnet.net/LR/Chatpre.aspx?id=PLT70547676&lng=cn', '_blank')
    openJesongChatByGroup(13072,25026);return false;
    // window.open('https://tb.53kf.com/code/client/e87c220968f7fcbffe4a0165dd3e04c67/1', '_blank')
  }
  const introductionSettings = {
    // dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: introduceData.length || [],
    slidesToScroll: 1,
    autoplay: true,
    arrows: false,
    // nextArrow: <SamplePrevArrow />,
    // prevArrow: <SamplePrevArrow />
  };
  const onZixunClick = () => {
    // window.open('http://plt.zoosnet.net/LR/Chatpre.aspx?id=PLT70547676&lng=cn', '_blank')
    openJesongChatByGroup(13072,25026);return false;
    // window.open('https://tb.53kf.com/code/client/e87c220968f7fcbffe4a0165dd3e04c67/1', '_blank')
  }
  const pushToCollegeIntroduction = (id) => {
    console.log('id: ', id);
    let url = '';
    if (id === 1) {
      url = '/university/about-school';
    }
    else if (id === 2) {
      url = '/university/about-school';
    }
    else if (id === 3) {
      url = '/university/about-school';
    }
    else if (id === 4) {
      url = '/university/about-school';
    }
    // router.push(`${url}?collegeId=${id}`)
    window.open(`http://home.himedu.cn${url}?collegeId=${id}`, '_blank')
  }
  const activitySettings = {
    // dots: true,
    infinite: true,
    speed: 500,
    // slidesToShow: 4,
    slidesToShow: activityData.length < 4 ? activityData.length : 4,
    slidesToScroll: 1,
    autoplay: true,
    arrows: false,
    // nextArrow: <SamplePrevArrow />,
    // prevArrow: <SamplePrevArrow />
  };
  const pushToProblem = (e) =>{
    // router.push('/commonProblem')
    window.open('http://home.himedu.cn/commonProblem', '_blank')
  }
  const pushToInformation = (e)=>{
    // router.push('/industryInformation');
    window.open('http://home.himedu.cn/industryInformation', '_blank')
  }

  return (
    <div className={styles.normal}>
      <Helmet>
        {/*<meta charSet="utf-8" />*/}
        {/*<title>My Title</title>*/}
        {/*<link rel="canonical" href="http://mysite.com/example" />*/}
        <title>在职国际MBA_法国在职EMBA_EDBA招生-华隽教育</title>
        <meta name="keywords" content="在职国际MBA,法国在职EMBA,EDBA招生,工商管理硕士,在职硕士,免联考MBA,上海国际MBA招生"/>
        <meta name="description" content="法国蒙彼利埃第三大学（法国保罗·瓦莱里大学）具有800历史的公立大学，在职国际EDBA\EMBA学位教育，免联考，高额奖学金，纯正欧洲实证主义教学。" />
      </Helmet>
      <Row>
        <Col span={24}>
          <Carousel
            dots
            autoplay
            // afterChange={this.onChange}
          >
            {
              bannerData.map(function (item) {
                return (
                  <div key={item.id}>
                    <img
                      // onClick={onBannerClick}
                      style={{
                        height: 450,
                        width: '100%',
                        // cursor: 'pointer'
                      }}
                      src={imgDomainName + item.imgUrl}
                      title={item.alt}
                      alt={item.alt}
                    />
                  </div>
                )
              })
            }
          </Carousel>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Row>
            <Col span={24}>
              <BigTitle chineseTitle='大学介绍' englishTitle='INTRODUCTION' />
            </Col>
          </Row>
          <Row>
            <Col span={24} style={{padding: '40px 20px 0 20px'}}>
              <Slider settings={introductionSettings} data={introduceData}/>
              {/*<Row>*/}
                {/*<Col span={1}>*/}
                  {/*<Icon*/}
                    {/*className={styles.leftArrow}*/}
                    {/*type="left-circle"*/}
                    {/*onClick={() => slider.slickPrev()}*/}
                    {/*style={{display: introduceData.length>5 ? 'block' : 'none'}}*/}
                  {/*/>*/}
                {/*</Col>*/}
                {/*<Col span={22}>*/}
                  {/*<Row gutter={16}>*/}
                    {/*<Slider*/}
                      {/*{ ...introductionSettings }*/}
                      {/*className={styles.slider}*/}
                      {/*ref={c => (slider = c)}*/}
                    {/*>*/}
                      {/*{introduceData.map((item, index) => (*/}
                        {/*<Col span={6}>*/}
                          {/*<SliderItem*/}
                            {/*imgSrc={imgDomainName + item.coverUrl}*/}
                            {/*// content={localStorage.getItem('umi_locale') == 'zh-CN'?item.introduce:item.introduceEN}*/}
                            {/*content={item.introduce}*/}
                            {/*listDataSource={item.informationList}*/}
                            {/*key={index}*/}
                            {/*id={item.id}*/}
                          {/*/>*/}
                        {/*</Col>*/}
                      {/*))}*/}
                    {/*</Slider>*/}
                  {/*</Row>*/}
                {/*</Col>*/}
                {/*<Col span={1}>*/}
                  {/*<Icon*/}
                    {/*className={styles.rightArrow}*/}
                    {/*// style={{float: 'left', left: '20px', lineHeight: '143px', cursor: 'pointer'}}*/}
                    {/*type="right-circle"*/}
                    {/*onClick={() => slider.slickNext()}*/}
                    {/*style={{display: introduceData.length>5 ? 'block' : 'none'}}*/}
                  {/*/>*/}
                {/*</Col>*/}
              {/*</Row>*/}
              {/*<Slider settings={introductionSettings} data={introduceData}/>*/}
            </Col>
          </Row>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Row>
            <Col span={24}>
              <BigTitle chineseTitle='学院活动' englishTitle='ACTIVITY' />
              {/*<BigTitle chineseTitle={<FormattedMessage id="company.home.activity" />} englishTitle='ACTIVITY' />*/}
            </Col>
          </Row>
          <Row>
            <Col span={24} style={{padding: '40px 20px 0 20px'}}>
              <ActivitySlider settings={activitySettings} data={activityData}/>
            </Col>
          </Row>
        </Col>
      </Row>
      <AboutUS />
      <Row>
        <Col span={24}>
          <Row>
            <Col span={24}>
              <BigTitle chineseTitle='常见问题' englishTitle='QUESTION' />
              {/*<BigTitle chineseTitle={<FormattedMessage id="company.home.question" />} englishTitle='QUESTION' />*/}
            </Col>
          </Row>
          <Row type='flex'>
            <Col span={2} offset={20} style={{textAlign: 'left'}}>
              <a onClick={pushToProblem}>
                {/*<KnowMore icon={JIANTOU2} title={localStorage.getItem('umi_locale') == 'zh-CN'?'了解更多':'Know More'} />*/}
                <KnowMore icon={JIANTOU2} title='了解更多' />
              </a>
            </Col>
          </Row>
          <Row>
            <Col span={24} style={{marginTop: 50}}>
              <Question problemList={problemData}/>
            </Col>
          </Row>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Row>
            <Col span={24}>
              <BigTitle chineseTitle='行业资讯' englishTitle='INFORMATION' />
              {/*<BigTitle chineseTitle={<FormattedMessage id="company.home.information" />} englishTitle='INFORMATION' />*/}
            </Col>
          </Row>
          <Row type='flex'>
            <Col span={2} offset={20} style={{textAlign: 'left'}}>
              <a onClick={pushToInformation}>
                {/*<KnowMore icon={JIANTOU2} title={localStorage.getItem('umi_locale') == 'zh-CN'?'了解更多':'Know More'} />*/}
                <KnowMore icon={JIANTOU2} title={'了解更多'} />
              </a>
            </Col>
          </Row>
          <Row type='flex' justify='center' style={{paddingTop: 33}}>
            <Col span={24}>
              <Information informationList={informationData}/>
            </Col>
          </Row>
        </Col>
      </Row>
      <a onClick={() => window.open('http://home.himedu.cn/contact', '_blank')}>
        <ContactUS />
      </a>
      {/*<Links />*/}
      <Footer collegeData={collegeData} setting={settingData}/>

      <Row style={{marginTop: 59}}>
        {/*<Col span={24}></Col>*/}
      </Row>
    </div>
  );
}

Page.getInitialProps = async ({ store, route, isServer, req }) => {
  console.log('Home getInitialProps', store, route, isServer);
  // const res = await fetch(`https://github-trending-api.now.sh/repositories${req.url || ''}`);
  const bannerRes = await fetch(`${apiDomainName}/banner/list?collegeId=0`);
  // console.log('bannerRes: ', bannerRes);

  const introduceRes = await fetch(`${apiDomainName}/college/introduceList`);
  // console.log('introduceRes: ', introduceRes);

  const activityRes = await fetch(`${apiDomainName}/activity/list?collegeId=0`);
  // console.log('activityRes: ', activityRes);

  const problemRes = await fetch(`${apiDomainName}/problem/list`);
  // console.log('problemRes: ', problemRes);

  const informationRes = await fetch(`${apiDomainName}/information/list`);
  // console.log('informationRes: ', informationRes);

  const collegeRes = await fetch(`${apiDomainName}/college/introduceList`);
  // console.log('collegeRes: ', collegeRes);

  const settingRes = await fetch(`${apiDomainName}/setting/0`);
  // console.log('settingRes: ', settingRes);

  return {
    bannerData: bannerRes.data.map(item => ({ id: item.id, imgUrl: item.imgUrl, alt: item.alt })),
    introduceData: introduceRes.data.map(item => ({ coverUrl: item.coverUrl, introduce: item.introduce.substr(0, 120), id: item.id })),
    activityData: activityRes.data.map(item => ({ id: item.id, coverUrl: item.coverUrl, title: item.title, createTime: item.createTime, synopsis: item.synopsis.substr(0, 90) })),
    problemData: problemRes.data.map(item => ({ typeStr: item.typeStr, list: item.list.filter((item1, index) => index <= 2).map(item2 => ({ id: item2.id, problem: item2.problem })) })),
    informationData: informationRes.data.filter((item, index) => index < 9).map(item1 => ({ id: item1.id, title: item1.title })),
    collegeData: collegeRes.data.map(item => ({ name: item.name })),
    settingData: { wechatPublicNumber: settingRes.data.wechatPublicNumber, wechatService: settingRes.data.wechatService },
  };
};

export default Page;
